<template>
  <div class="tabList">
    <!-- 左箭头 -->
    <div class="tabs-arrow left" @click="goLeft">
      <left-outlined v-show="tranX != 0" />
    </div>
    <div class="tabs-content">
      <div ref="main" class="tabs-main" :style="{ transform: 'translateX(' + tranX + 'px)' }">
        <div
          v-for="item in tabsList"
          :ref="contentItemFn"
          :key="item.id"
          :style="setStyles"
          :class="['content-item', activeKey == item.id ? 'check' : '']"
          @click="onChangeTabs(item)"
        >
          {{ item.itemName }}
        </div>
      </div>
    </div>
    <!-- 右箭头 -->
    <div class="tabs-arrow right" @click="goRight">
      <right-outlined v-show="showRight" />
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted, nextTick, watch, onBeforeUnmount, computed } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { getOneExamineItem } from '@/api/ruleSetting';
import { useStore } from 'vuex';

const store = useStore();

function setWidth() {
  clientWidth.value = document.documentElement.clientWidth;
}
onMounted(() => {
  setWidth();
  window.addEventListener('resize', setWidth, true);
  getTabsList();
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', setWidth);
});
let tabsList = ref([]);
let activeKey = ref('');
let activeName = ref('');

const clientWidth = ref(); // 页面宽度
let tranX = ref(0);
let tranNum = 0;
let tranMax = 0;
let moveNum = 3;
let showRight = ref(false);
let main = ref(null);
let contentItem = [];
const contentItemFn = el => {
  if (contentItem.length === tabsList.value.length) {
    contentItem = [];
  }
  contentItem.push(el);
};
// 获取tabs列表
function getTabsList() {
  getOneExamineItem().then(res => {
    let dormitoryUserQuery = localStorage.getItem('dormitoryUserQuery');
    let dormitoryCollectiveQuery = localStorage.getItem('dormitoryCollectiveQuery');
    let classCollectiveQuery = localStorage.getItem('classCollectiveQuery');
    tabsList.value = res.data.data;
    tabsList.value.push({
      id: 'all',
      itemName: '综合查询'
    });
    if (tabsList.value.length > 0) {
      activeKey.value = tabsList.value[0].id;
      activeName.value = tabsList.value[0].itemName;
      let obj = {
        id: activeKey.value,
        itemName: activeName.value
      };
      emit('onTabsValue', obj, '0');
    } else {
      activeKey.value = 'all';
      activeName.value = '综合查询';
      let obj = {
        id: activeKey.value,
        itemName: activeName.value
      };
      emit('onTabsValue', obj, '0');
    }
    if (dormitoryUserQuery && dormitoryUserQuery !== null) {
      activeKey.value = JSON.parse(dormitoryUserQuery).activeKey;
    }
    if (dormitoryCollectiveQuery && dormitoryCollectiveQuery !== null) {
      activeKey.value = JSON.parse(dormitoryCollectiveQuery).activeKey;
    }
    if (classCollectiveQuery && classCollectiveQuery !== null) {
      activeKey.value = JSON.parse(classCollectiveQuery).activeKey;
    }
    emit('onTabs', activeKey.value, activeName.value);
    nextTick(setTabs);
  });
}
watch(
  () => clientWidth.value,
  val => {
    tabsList.value.length !== 0 && setTabs();
  }
);
function setTabs() {
  tranMax = Math.floor(tabsList.value.length / moveNum);
  let widthAll = 0;
  let widthItem = 0;
  for (let i = 0; i < contentItem.length; i++) {
    widthItem = contentItem[i].offsetWidth + (i === 0 ? 0 : 20);
    widthAll += widthItem;
  }
  if (widthAll > main.value.offsetWidth) {
    showRight.value = true;
  } else {
    showRight.value = false;
  }
}
const emit = defineEmits(['onTabsValue', 'onTabs']);
const onChangeTabs = e => {
  activeKey.value = e.id;
  activeName.value = e.itemName;
  emit('onTabsValue', e, '1');
};
function onTabs(activeKey, activeName) {
  emit('onTabs', activeKey.value, activeName.value);
}

let distance = [];
function goLeft() {
  if (tranNum !== 0) {
    tranNum--;
    showRight.value = true;
    tranX.value += distance[distance.length - 1];
  }
}
function goRight() {
  if (showRight.value && tranNum < tranMax) {
    let width = 0;
    contentItem.forEach((item, index) => {
      if (index < moveNum) {
        width = width + item.offsetWidth + (index === 0 ? 0 : 20);
      }
    });
    distance.push(width);
    tranNum++;
    if (tranNum === tranMax) showRight.value = false;
    tranX.value -= width;
  }
}

// 定义颜色变量
const setStyles = computed(() => {
  return {
    '--primaryColor': store.state.user.primaryColor,
    primaryColor: store.state.user.primaryColor
  };
});
</script>

<style lang="less" scoped>
.tabList {
  width: 100%;
  height: 50px;
  display: flex;
  position: relative;
  border-bottom: 1px solid rgb(229, 231, 235);
  margin-bottom: 20px;
  .tabs-arrow {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    position: absolute;
    top: -1px;
    z-index: 10;
    cursor: pointer;
  }
  .left {
    left: 0;
  }
  .right {
    right: 0;
  }
  .tabs-content {
    width: 100%;
    height: 51px;
    padding: 0 50px;
    overflow: hidden;
    .tabs-main {
      display: flex;
      flex-wrap: nowrap;
      transition: all 0.2s;
      margin: 0;
      .content-item {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding: 0 24px;
        margin-left: 20px;
        white-space: nowrap;
        position: relative;
        cursor: pointer;
        &:first-child {
          margin-left: 0;
        }
        &:hover {
          color: v-bind('setStyles.primaryColor') !important;
        }
        &::after {
          content: ' ';
          width: 0;
          height: 2px;
          background-color: v-bind('setStyles.primaryColor') !important;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          transition: all 0.3s;
        }
      }
      .check {
        color: v-bind('setStyles.primaryColor') !important;
        &::after {
          width: 100%;
        }
      }
    }
  }
}
</style>
